<template>
  <div class="main">
    <div class="main-top">
      <div class="main-top-left">
        <inform-notice></inform-notice>
      </div>
      <div class="main-top-center">
        <my-backlog></my-backlog>
      </div>
      <div class="main-top-right">
        <file-inquire></file-inquire>
      </div>
    </div>
    <div class="main-center">
      <div class="main-center-left">
        <chart-1></chart-1>
      </div>
      <div class="main-center-center">
        <chart-2></chart-2>
      </div>
      <div class="main-center-right">
        <recent-task></recent-task>
      </div>
    </div>
    <div class="main-bottom">
      <div class="main-bottom-left">
        <order-board></order-board>
      </div>
      <div class="main-bottom-right">
        <chart-3></chart-3>
      </div>
    </div>
  </div>
</template>

<script>
import MyBacklog from '@/components/my-backlog.vue';
import InformNotice from '@/components/inform-notice.vue';
import FileInquire from '@/components/file-inquire.vue';
import Chart1 from '@/components/chart-1.vue';
import Chart2 from '@/components/chart-2.vue';
import Chart3 from '@/components/chart-3.vue';
import RecentTask from '@/components/recent-task.vue';
import OrderBoard from '@/components/order-board.vue';

export default {
  components: {MyBacklog, InformNotice, FileInquire, Chart1, Chart2, Chart3, RecentTask, OrderBoard },
  name: "DataviewIndex",
  props: {},
  data() {
    return {
      data: {},
    };
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
};
</script> 

<style scoped lang='scss'>
.main{
  font-size: 0.12rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  &-top{
    height: 0;
    flex: 1.5;
    margin-bottom: 0.08rem;
    display: flex;
    &-left{
      width: 0;
      flex: 2;
      margin-right: 0.08rem;
      background-color: #fff;
    }
     &-center{
      width: 0;
      flex: 3;
      margin-right: 0.08rem;
      margin-left: 0.08rem;
      background-color: #fff;
    }
     &-right{
      width: 0;
      flex: 1;
      margin-left: 0.08rem;
      background-color: #fff;
    }
  }
  &-center{
    height: 0;
    flex: 2;
    display: flex;
    margin-bottom: 0.08rem;
    margin-top: 0.08rem;
    &-left{
      width: 0;
      flex: 1;
      margin-right: 0.08rem;
      background-color: #fff;
    }
     &-center{
      width: 0;
      flex: 1;
      margin-right: 0.08rem;
      margin-left: 0.08rem;
      background-color: #fff;
    }
     &-right{
      width: 0;
      flex: 1;
      margin-left: 0.08rem;
      background-color: #fff;
    }

  }
  &-bottom{
    height: 0;
    flex: 2.5;
    margin-top: 0.08rem;
    display: flex;
    &-left{
      background-color: #fff;
      flex: 2.025;
      margin-right: 0.08rem;
    }
     &-right{
      background-color: #fff;
      flex: 1;
      margin-left: 0.08rem;
    }
  }
}
</style>
